<template>
    <div class="home com-class">
        <div class="left-div">
            <div class="search-form">
                <span>统计时间:</span>
                <el-select v-model="selectYear" placeholder="年份">
                     <el-option
                    v-for="item in yearOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
                <el-select v-model="selectMonth" placeholder="月份">
                     <el-option
                    v-for="item in monthOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </div>

            <div class="emergency">
                <p><span class="emergency-titleText" @click="toPageTufashijian()">突发事件(个)</span></p>
                <div class="emergency-content">
                    <div class="total">
                        <p class="line1">同比:<span class="font-color-red">10%</span><a class="jiantou-img data-up"></a></p>
                        <p class="line2 font-color-orange can-click" @click="openEmergenciesDialog()">4000</p>
                        <p class="line3">突发事件总数</p>
                    </div>
                    <div class="total">
                        <p class="line1">同比:<span class="font-color-red">10%</span><a class="jiantou-img data-up"></a></p>
                        <p class="line2 font-color-red">20</p>
                        <p class="line3">本月突发事件数</p>
                    </div>
                    <div class="total">
                        <p class="line1">同比:<span class="font-color-red">10%</span><a class="jiantou-img data-up"></a></p>
                        <p class="line2 font-color-greed">200</p>
                        <p class="line3">响应突发事件数</p>
                    </div>
                </div>
            </div>

            <div class="city-ranking">
                <p class="line1">
                    <span>本月新增事件数城市前五名</span> 
                    <el-button :class="provinceOrCity_1 === 'city' ? 'el-button-active' : ''" round size="small" @click="genCityRank('城市')">城市排名</el-button>
                    <el-button :class="provinceOrCity_1 === 'province' ? 'el-button-active' : ''" round size="small" @click="genCityRank('省份')">省排名</el-button>
                </p>
                <div ref="echartsRanking" class="echarts-div"></div>
            </div>

            <div class="potential-risks">
                <p class="line1"><span @click="toPageFengxianyinhuan" ref="sanClick">风险隐患</span></p>
                <div class="line2">
                    <span class="title">自然灾害</span>
                    <div class="item">
                        <p class="line-1"><span class="span-dg font-bold">100</span>处</p>
                        <p class="p-dg">隐患总数</p>
                    </div>
                    <div class="item">
                        <p class="line-1"><span class="span-dg font-bold">40</span>处</p>
                        <p class="p-dg">整改总数</p>
                    </div>
                </div>
                <div class="line2">
                    <span class="title">安全生产</span>
                    <div class="item">
                        <p class="line-1"><span class="span-dg font-bold">300</span>个</p>
                        <p class="p-dg">隐患总数</p>
                    </div>
                    <div class="item">
                        <p class="line-1"><span class="span-dg font-bold">30</span>个</p>
                        <p class="p-dg">整改总数</p>
                    </div>
                </div>
                <!-- 危化品 -->
                <p class="weihuaping-title">危化品</p>
                <div class="container">
                    <div class="item div-left">
                        <span class="top"><span class="number font-bold">120000</span>吨</span>
                        <span>存量</span>
                    </div>
                    <div class="item div-right">
                        环比:<span class="font-color-red font-bold">7%</span>
                        <a class="jiantou-img data-up" style="margin-bottom: 0;"></a>
                    </div>

                    <div class="item div-left-2">
                        <span class="top"><span class="font-bold">40</span>份</span>
                        <span>当月运单数量</span>
                    </div>
                    <div class="item div-right-2">
                        <span>同比:<span class="font-color-red font-bold">8%</span><a class="jiantou-img data-up"></a></span>
                        <span>环比:<span class="font-color-greed font-bold">9%</span><a class="jiantou-img data-down"></a></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="center-div">
            <BaseMap :area-code="areaCode" :area-type="areaType" show-type="home" @changeMapArea="changeMapArea"></BaseMap>
        </div>
        <div class="right-div">
            <div class="common div-jcyj" isfirst="yes">
                <p class="title"><span @click="toPageJianceyujing()">监测预警</span></p>
                <div class="content-block">
                    <p item1>
                        <span item1>气象预警数量</span>
                    </p>
                    <div class="line-div">
                        <div gradient-line></div>
                    </div>
                    <p item2>
                        <span number><span dynamic>150</span> 个</span>
                    </p>
                    <div item4>
                        <p>同比: <span class="font-bold">10% <a class="jiantou-img data-up"></a> </span> </p>
                        <p>环比: <span class="font-bold">11% <a class="jiantou-img data-up"></a> </span> </p>
                    </div>
                </div>
                <div class="content-block">
                    <p item1>
                        <span item1>网络安全漏洞</span>
                    </p>
                    <div class="line-div">
                        <div gradient-line></div>
                    </div>
                    <p item2>
                        <span number> <span dynamic>50</span>个</span>
                    </p>
                    <div item4>
                        <p>同比: <span class="font-bold">13% <a class="jiantou-img data-up"></a> </span> </p>
                        <p>环比: <span class="font-bold">12% <a class="jiantou-img data-up"></a> </span> </p>
                    </div>
                </div>
                <div class="content-block">
                    <p item1>
                        <span item1>重点区域人员<br/>密度预警数</span>
                    </p>
                    <div class="line-div">
                        <div gradient-line></div>
                    </div>
                    <p item2>
                        <span number> <span dynamic>130</span>个</span>
                    </p>
                    <div item4>
                        <p>同比: <span class="font-bold">12% <a class="jiantou-img data-up"></a> </span> </p>
                        <p>环比: <span class="font-bold">14% <a class="jiantou-img data-up"></a> </span> </p>
                    </div>
                </div>
                <div class="content-block">
                    <p item1>
                        <span item1>城市安全舆情<br/>预警数</span>
                    </p>
                    <div class="line-div">
                        <div gradient-line></div>
                    </div>
                    <p item2>
                        <span number> <span dynamic>80</span>个</span>
                    </p>
                    <div item4>
                        <p>同比: <span class="font-bold">18% <a class="jiantou-img data-up"></a> </span> </p>
                        <p>环比: <span class="font-bold">18% <a class="jiantou-img data-up"></a> </span> </p>
                    </div>
                </div>
            </div>
            <div class="common div-sgaq">
                <p class="title" @click="toPageShigonganquan()"><span>房屋与施工安全</span></p>
                <div container>
                    <div content>
                        <span><span dynamic>3000 </span>个</span>
                        <span class="font-mid">环比:<span number class="font-bold">14%<a class="jiantou-img data-up"></a></span></span>
                        <span class="upper">工程总数</span>
                    </div>
                    <div content>
                        <span><span dynamic>2890</span>个</span>
                        <span class="font-mid">环比:<span number class="font-bold">9%<a class="jiantou-img data-up"></a></span></span>
                        <span class="upper">已安全考评工程数</span>
                    </div>
                    <div content>
                        <span><span dynamic>200</span>个</span>
                        <span class="font-mid">环比:<span number class="font-bold">17%<a class="jiantou-img data-up"></a></span></span>
                        <span class="upper">建筑起重机械使用登记数</span>
                    </div>
                    <div content>
                        <span><span dynamic>130</span>个</span>
                        <span class="font-mid">环比:<span number class="font-bold">12%<a class="jiantou-img data-up"></a></span></span>
                        <span class="upper">到期房屋数</span>
                    </div>
                    <div content>
                        <span><span dynamic>230</span>个</span>
                        <span class="font-mid">环比:<span number class="font-bold">6%<a class="jiantou-img data-up"></a></span></span>
                        <span class="upper">在册危房数</span>
                    </div>
                    <div content>
                        <span><span dynamic>130</span>个</span>
                        <span class="font-mid">环比:<span number class="font-bold">12%<a class="jiantou-img data-up"></a></span></span>
                        <span class="upper">解危房屋数</span>
                    </div>
                </div>
            </div>
            <div class="common div-zbpj">
                <p class="title">
                    <span @click="openZbpjDialog()">指标评价</span>
                    <el-button :class="provinceOrCity_2 === 'city' ? 'el-button-active' : ''" round size="small" @click="switchTableData('city')">城市排名</el-button>
                    <el-button :class="provinceOrCity_2 === 'province' ? 'el-button-active' : ''" round size="small" @click="switchTableData('province')">省排名</el-button>
                </p>
                <el-table ref="mytable" class="mytable module" :data="tableData" style="width: 100%" :row-style="{height: '0.040rem'}" :cell-style="{padding:'0.005rem'}">
                    <el-table-column
                        prop="rank"
                        align="center">
                        <template slot="header">
                            <span style="font-weight:bold;color:black;font-size:0.015rem">排名</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="cityName"
                        align="center">
                        <template slot="header">
                            <span style="font-weight:bold;color:black;font-size:0.015rem">省份/城市</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="score"
                        align="center">
                        <template slot="header">
                            <span style="font-weight:bold;color:black;font-size:0.015rem">综合得分</span>
                        </template>
                        <template slot-scope="scope">
                            <el-popover trigger="hover" placement="top">
                                <p style="text-align:center; margin: 5px 0;">{{ scope.row.cityName }}</p>
                                <p style="text-align:center; margin: 5px 0;">源头治率: 16</p>
                                <p style="text-align:center; margin: 5px 0;">风险估控: 17</p>
                                <p style="text-align:center; margin: 5px 0;">监督管理: 18</p>
                                <p style="text-align:center; margin: 5px 0;">交通管理: 19</p>
                                <div slot="reference" class="name-wrapper">
                                    <el-tag size="medium">{{ scope.row.score }}</el-tag>
                                </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="result"
                        align="center">
                        <template slot="header">
                            <span style="font-weight:bold;color:black;font-size:0.015rem">评价结果</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>

        <el-dialog
                class="dialog-emergencies"
                :visible.sync="showEmergenciesDialog"
                :close-on-click-modal="false"
                :title="selectYear + '突发事件统计'"
                width="800px">
            <div class="dialog-emergencies-title">
                各城市突发事件排名
                <br/>
                ({{selectYear}}年)
            </div>
            <div class="dialog-emergencies-total">
                <div class="toal-div">
                    <div class="text-margin">
                        突发事件总量
                        <br/>
                        <span class="font-color-orange font-bold">127</span>
                        件
                    </div>
                </div>
                <div class="toal-div">
                    <div class="text-margin">
                        死亡人数
                        <br/>
                        <span class="font-color-orange font-bold">103</span>
                        人
                    </div>
                </div>
                <div class="toal-div">
                    <div class="text-margin">
                        经济损失
                        <br/>
                        <span class="font-color-orange font-bold">982</span>
                        万元
                    </div>
                </div>
            </div>
            <div ref="emergenciesTotalEcharts" class="dialog-emergencies-echarts"></div>
        </el-dialog>

        <!-- 点击指标评价，弹出的框 start -->
        <el-dialog
                class="dialog-zbpj"
                :visible.sync="showZbpjDialog"
                :close-on-click-modal="false"
                title="城市指标评价排名"
                width="800px">
            <div class="dialog-zbpj-title">{{selectYear}}城市指标评价排名</div>
            <!--表格 start-->
            <el-table class="module table-border" :data="pageZbpj.content" stripe size="small">
                <el-table-column property="rank" label="排名" align="center" width="80px"></el-table-column>
                <el-table-column property="cityName" label="城市" align="center" width="80px"></el-table-column>
                <el-table-column property="ytzl" label="源头治理(20分)" align="center"></el-table-column>
                <el-table-column property="fxfk" label="风险防控(45分)" align="center"></el-table-column>
                <el-table-column property="jdgl" label="监督管理(15分)" align="center"></el-table-column>
                <el-table-column property="yjjy" label="应急救援(20分)" align="center"></el-table-column>
                <el-table-column property="total" label="总分(100分)" align="center"></el-table-column>
            </el-table>
            <!--表格 end-->
            <!--分页 start-->
            <div class="pagination-page">
                <el-pagination
                        class="module"
                        background
                        layout="prev, pager, next, jumper, ->, total"
                        @current-change="pageChangeZbpj"
                        :total="pageZbpj.total"
                        :page-size="pageZbpj.size"
                        :current-page.sync="pageZbpj.current">
                </el-pagination>
            </div>
            <!--分页 end-->
        </el-dialog>
        <!-- 点击指标评价，弹出的框 end -->
    </div>
</template>

<script>
import BaseMap from '../../../../components/BaseMap/BaseMap'


export default {
    name: "home",
    data() {
        return {
            selectYear: '',
            selectMonth: '',
            areaCode: '',
            areaType: 'city',
            echartOption1: {},//本月新增事件数前5名-echart对象的option
            yearOptions: [
                { label: '2020年', value: 2020 },
                { label: '2019年', value: 2019 },
                { label: '2018年', value: 2018 },
                { label: '2017年', value: 2017 }
            ],
            monthOptions: [
                { label: '1月', value: 1 },
                { label: '2月', value: 2 },
                { label: '3月', value: 3 },
                { label: '4月', value: 4 },
                { label: '5月', value: 5 },
                { label: '6月', value: 6 },
                { label: '7月', value: 7 },
                { label: '8月', value: 8 },
                { label: '9月', value: 9 },
                { label: '10月', value: 10 },
                { label: '11月', value: 11 },
                { label: '12月', value: 12 }
            ],
            echartsRankingData: [],
            upperLimit: [],
            echartObj: null,//echart对象-本月新增事件数前5名
            tableData: [{//表格数据
                rank: '1',
                cityName: '广东',
                score: '98',
                result: '合格'
            },{
                rank: '2',
                cityName: '浙江',
                score: '92',
                result: '合格'
            },{
                rank: '3',
                cityName: '上海',
                score: '83',
                result: '合格'
            },{
                rank: '4',
                cityName: '江苏',
                score: '90',
                result: '合格'
            }, ],
            provinceOrCity_1:'province',
            provinceOrCity_2:'province',
            showZbpjDialog: false,//标识是否打开指标评价
            pageZbpj:{          //指标评价数据
                total: 100,
                current: 1,
                size: 10,
                content: [
                    {rank: '1', cityName: '北京', ytzl: '20', fxfk: '44', jdgl: '15', yjjy: '20', total: '99'},
                    {rank: '2', cityName: '上海', ytzl: '20', fxfk: '44', jdgl: '15', yjjy: '20', total: '99'},
                    {rank: '3', cityName: '深圳', ytzl: '20', fxfk: '44', jdgl: '15', yjjy: '20', total: '99'},
                    {rank: '4', cityName: '广州', ytzl: '20', fxfk: '44', jdgl: '15', yjjy: '20', total: '99'},
                    {rank: '5', cityName: '成都', ytzl: '20', fxfk: '44', jdgl: '15', yjjy: '20', total: '99'},
                    {rank: '6', cityName: '重庆', ytzl: '20', fxfk: '44', jdgl: '15', yjjy: '20', total: '99'},
                    {rank: '7', cityName: '苏州', ytzl: '20', fxfk: '44', jdgl: '15', yjjy: '20', total: '99'},
                    {rank: '8', cityName: '南京', ytzl: '20', fxfk: '44', jdgl: '15', yjjy: '20', total: '99'},
                    {rank: '9', cityName: '武汉', ytzl: '20', fxfk: '44', jdgl: '15', yjjy: '20', total: '99'},
                    {rank: '10', cityName: '长沙', ytzl: '20', fxfk: '44', jdgl: '15', yjjy: '20', total: '99'},
                ]
            },
            showEmergenciesDialog: false,   //突发事件弹框
            emergenciesChart: null,         //突发事件弹框echarts
        }
    },
    watch:{
    },
    methods: {
        //地图区域发生变化
        changeMapArea(params) {
            if(params.areaType == 'province') {
                // 去到省份
                this.$router.push(`/portal-web/home/homeProvince`)
            }
            if(params.areaType == 'city') {
                // 去到市
                this.$router.push(`/portal-web/home/homeCity`)
            }
            if(params.areaType == 'country') {
                // 去到国家
                this.$router.push(`/portal-web/home`)
            }
        },
        getEchartsRankingData() {//echart随机数据-本月新增事件数城市前五名
            let data = []
            for(let i=0;i<5;i++) {
                data.push(Math.floor(Math.random()*16+4));
            }
            data.sort(function(a, b) { return b - a });
            let up = Math.max(...data) + 3;
            this.upperLimit.push(up,up,up,up,up);
            return data;
        },
        toPageFengxianyinhuan() {    //风险隐患
            this.$router.push('/portal-web/home/fengxianyinhuan')
        },
        toPageTufashijian() {    //突发事件
            this.$router.push('/portal-web/home/tufashijian');
        },
        toPageJianceyujing() {   //监测预警
            this.$router.push('/portal-web/home/jianceyujing');
        },
        toPageShigonganquan() {   //施工安全
            this.$router.push('/portal-web/home/shigonganquan');
        },
        topText(param, type) {//label标签数据-本月新增事件数城市前五名
            if(type == '省份') {
                switch (param.name){
                    case '福建':
                        return this.echartsRankingData[0]
                    case '北京':
                        return this.echartsRankingData[1];
                    case '广东':
                        return this.echartsRankingData[2];
                    case '江苏':
                        return this.echartsRankingData[3];
                    case '浙江':
                        return this.echartsRankingData[4];
                    default:
                        return 0;
                }
            }
            if(type == '城市') {
                switch (param.name){
                    case '广州':
                        return this.echartsRankingData[0];
                    case '深圳':
                        return this.echartsRankingData[1];
                    case '长沙':
                        return this.echartsRankingData[2];
                    case '沈阳':
                        return this.echartsRankingData[3];
                    case '成都':
                        return this.echartsRankingData[4];
                    default:
                        return 0;
                }
            }
        },
        tooltipText(datas) {//本月新增事件数城市前五名-柱形图的鼠标悬浮提示
            let name = datas[1].name;
            let value = datas[1].value;
            return `<p style="text-align: center">${name}</p>
            <span style="margin-left: 8px;">事件:&nbsp;&nbsp;${value}&nbsp;个</span><br/>
            <span style="margin-left: 8px;">同比:&nbsp;&nbsp;20&nbsp;%&nbsp;</span><a class="jiantou-img data-up"></a><br/>
            <span style="margin-left: 8px;">环比:&nbsp;&nbsp;20&nbsp;%&nbsp;</span><a class="jiantou-img data-up"></a><br/>
            `
        },
        genCityRank(type) {//本月新增事件数城市前五名-点击城"市排名"、"省排名"按钮
            let _this = this;
            if(type === '省份') {
                this.provinceOrCity_1 = 'province'
                this.echartsRankingData = this.getEchartsRankingData();
                let option = {
                    color: ['#3398DB'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        },
                        formatter:function(datas){
                            return _this.tooltipText(datas);
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['福建', '北京', '广东', '江苏', '浙江'],
                            axisTick: {
                                alignWithLabel: true
                            },
                            splitLine: {
                                show: false,
                                lineStyle: {
                                    color: ['#FFA500','#FFA500'],
                                    width: 1,
                                    type: 'solid',
                                },
                            },
                            show:true
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: ['#262732','#FFA500'],
                                    width: 1,
                                    type: 'solid',
                                },
                            },
                            show: false,
                        }
                    ],
                    series: [
                        {
                            // name:'2',
                            type:'bar',
                            barWidth: 10,
                            itemStyle: {
                                normal:{
                                    label:{
                                        show: true,
                                        position:'top',
                                        textStyle:{
                                            color:'orange',
                                            fontSize:16
                                        },
                                        formatter: function(param) {
                                            return _this.topText(param, '省份')
                                        },
                                    },
                                    barBorderRadius:[5,5,5,5],
                                    color: 'rgba(192,192,192)'
                                }
                            },
                            data: _this.upperLimit,
                            barGap:'-100%',
                            animation:true,
                            barCategoryGap:'40%'
                        },
                        {
                            // name: '直接访问',
                            type: 'bar',
                            data: this.echartsRankingData,
                            barWidth: 10,
                            itemStyle:{
                                barBorderRadius:[5,5,5,5],
                                color: new this.$echarts.graphic.LinearGradient(0,0,0,1,[{offset:0, color:'#ffd009'},{offset:1, color:'#e08500'}])
                            }
                        }
                    ]
                };
                this.echartObj.setOption(option);
            }
            if(type === '城市') {
                this.provinceOrCity_1 = 'city'
                this.echartsRankingData = this.getEchartsRankingData();
                let option = {
                    color: ['#3398DB'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        },
                        formatter:function(datas){
                            return _this.tooltipText(datas);
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['广州', '深圳', '长沙', '沈阳', '成都'],
                            axisTick: {
                                alignWithLabel: true
                            },
                            splitLine: {
                                show: false,
                                lineStyle: {
                                    color: ['#FFA500','#FFA500'],
                                    width: 1,
                                    type: 'solid',
                                },
                            },
                            show:true
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: ['#262732','#FFA500'],
                                    width: 1,
                                    type: 'solid',
                                },
                            },
                            show: false,
                        }
                    ],
                    series: [
                        {
                            // name:'2',
                            type:'bar',
                            barWidth: 10,
                            itemStyle: {
                                normal:{
                                    label:{
                                        show: true,
                                        position:'top',
                                        textStyle:{
                                            color:'orange',
                                            fontSize:16
                                        },
                                        formatter: function(param) {
                                            return _this.topText(param, '城市')
                                        },
                                    },
                                    barBorderRadius:[5,5,5,5],
                                    color: 'rgba(192,192,192)'
                                }
                            },
                            data: _this.upperLimit,
                            barGap:'-100%',
                            animation:true,
                            barCategoryGap:'40%'
                        },
                        {
                            // name: '直接访问',
                            type: 'bar',
                            data: this.echartsRankingData,
                            barWidth: 10,
                            itemStyle:{
                                barBorderRadius:[5,5,5,5],
                                color: new this.$echarts.graphic.LinearGradient(0,0,0,1,[{offset:0, color:'#ffd009'},{offset:1, color:'#e08500'}])
                            }
                        }
                    ]
                };
                this.echartObj.setOption(option);
            }

        },
        switchTableData(type) {//指标评价-点击城"市排名"、"省排名"按钮
            if(type === 'province') {
                this.provinceOrCity_2 = 'province';
                this.tableData = [{//表格数据
                    rank: '1',
                    cityName: '广东',
                    score: '98',
                    result: '合格'
                },{
                    rank: '2',
                    cityName: '浙江',
                    score: '92',
                    result: '合格'
                },{
                    rank: '3',
                    cityName: '上海',
                    score: '83',
                    result: '合格'
                },{
                    rank: '4',
                    cityName: '江苏',
                    score: '90',
                    result: '合格'
                }]
            }
            if(type === 'city'){
                this.provinceOrCity_2 = 'city';
                this.tableData = [{//表格数据
                    rank: '1',
                    cityName: '广州',
                    score: '95',
                    result: '合格'
                },{
                    rank: '2',
                    cityName: '深圳',
                    score: '92',
                    result: '合格'
                },{
                    rank: '3',
                    cityName: '珠海',
                    score: '88',
                    result: '合格'
                },{
                    rank: '4',
                    cityName: '东莞',
                    score: '80',
                    result: '合格'
                }]
            }


        },
        openZbpjDialog() {  //指标评价弹框
            this.showZbpjDialog = true;
        },
        pageChangeZbpj(currentPage) {
            this.pageZbpj.current = currentPage;
            let rank = (currentPage - 1) * 10;
            for(let index in this.pageZbpj.content){
                this.pageZbpj.content[index].rank = rank + parseInt(index) + 1;
            }
            this.getPage();
        },
        openEmergenciesDialog() {//突发事件弹框
            this.showEmergenciesDialog = true;
            this.initEmergenciesEcharts();
        },
        initEmergenciesEcharts(){     //突发事件统计弹框echarts
            let _this = this;
            if(!this.$refs.emergenciesTotalEcharts){
                setTimeout(function(){
                    _this.initEmergenciesEcharts();
                }, 500)
                return;
            }
            if(!this.emergenciesChart){
                this.emergenciesChart = this.$echarts.init(this.$refs.emergenciesTotalEcharts);
            }
            let xData = ['渭南', '舟山', '丽水', '杭州', '上海', '成都', '湖州', '延安', '贵阳', '深圳'];
            let seriesData = [21, 20, 15, 12, 10, 19, 25, 14, 17, 20];
            let option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    },
                    formatter:function(datas){
                        return _this.emergenciesEchartsToolTip(datas[0]);
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        data: xData,
                        axisTick: {
                            show: false,
                        },
                        splitLine: {
                            show: false,
                        },
                        show:true
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisTick: {
                            show: false,
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: ['#dae6f2'],
                                width: 0.5,
                                type: 'solid',
                            },
                        },
                        name:'单位(件)',
                        nameTextStyle:{
                            fontSize: 14,
                        },
                        show: true,
                    }
                ],
                series: [
                    {
                        type: 'bar',
                        data: seriesData,
                        barWidth: 40,
                        itemStyle:{
                            color: new this.$echarts.graphic.LinearGradient(0,0,0,1,[{offset:0, color:'#ffd009'},{offset:1, color:'#e08500'}])
                        }
                    }
                ]
            };
            this.emergenciesChart.setOption(option);
            this.emergenciesChart.resize();
        },
        emergenciesEchartsToolTip(data){
            let name = data.name;
            let value = data.value;
            return `<p style="margin-left: 8px;">城市: &nbsp;${name}&nbsp;&nbsp;&nbsp;&nbsp;排名: &nbsp;3&nbsp;</p>
                <span style="margin-left: 8px;">事件数量: &nbsp;${value}&nbsp;(件)&nbsp;</span><br/>
                <span style="margin-left: 8px;">死亡人数: &nbsp;7&nbsp;(人)&nbsp;</span><br/>
                <span style="margin-left: 8px;">经济损失: &nbsp;23.5&nbsp;(万元)&nbsp;</span><br/>`
        },
    },
    created() {
        this.echartsRankingData = this.getEchartsRankingData();
        this.areaCode = this.$local.getAreaCode();
        this.selectYear = new Date().getFullYear();
        this.selectMonth = new Date().getMonth() + 1;
        let _this = this
        this.echartOption1 = {
            color: ['#3398DB'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                },
                formatter:function(datas){
                    return _this.tooltipText(datas);
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['福建', '北京', '广东', '江苏', '浙江'],
                    axisTick: {
                        alignWithLabel: true
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: ['#FFA500','#FFA500'],
                            width: 1,
                            type: 'solid',
                        },
                    },
                    show:true
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: ['#262732','#FFA500'],
                            width: 1,
                            type: 'solid',
                        },
                    },
                    show: false,

                }
            ],
            series: [
                {
                    // name:'2',
                    type:'bar',
                    barWidth: 10,
                    itemStyle: {
                        normal:{
                            label:{
                                show: true,
                                position:'top',
                                textStyle:{
                                    color:'orange',
                                    fontSize:16
                                },
                                formatter: function(param) {
                                    return _this.topText(param, '省份')
                                },
                            },
                            barBorderRadius:[5,5,5,5],
                            color: 'rgba(192,192,192)'
                        }
                    },
                    data: this.upperLimit,
                    barGap:'-100%',
                    animation:true,
                    barCategoryGap:'40%'
                },
                {
                    // name: '直接访问',
                    type: 'bar',
                    data: this.echartsRankingData,
                    barWidth: 10,
                    itemStyle:{
                        barBorderRadius:[5,5,5,5],
                        color: new this.$echarts.graphic.LinearGradient(0,0,0,1,[{offset:0, color:'#ffd009'},{offset:1, color:'#e08500'}])
                    }
                }
            ]
        };
        
    },
    mounted() {
        this.echartObj = this.$echarts.init(this.$refs.echartsRanking);
        this.echartObj.setOption(this.echartOption1);
    },
    components: {
        BaseMap,
    },
}

</script>

<style scoped lang="less">
    .el-select-dropdown__item{
        text-align: center;
    }
    .el-select-dropdown__item.selected {
        font-weight: normal;
        background: @bg_color2;
        color: @font_color;
    }

    .home {
        height: 100%;
        width: 100%;
        padding: 0;
        color: @font_color;
        .left-div{
            position: absolute;
            margin: .015rem 0 .015rem .015rem;
            width: calc(30% - .015rem);
            height: calc(100% - .03rem);
            left: 0%;
            .search-form {
                display: flex;
                background: @color3;
                justify-content: space-around;
                align-items: center;
                height: 0.06rem;
                div.el-select {
                    width: 30%;
                    // width: 0.15rem;
                }
            }

            .emergency {
                span.emergency-titleText {
                    cursor: pointer;
                }
                height: 0.15rem;
                background: @color3;
                margin-top: 0.015rem;
                padding: 0.01rem;
                box-sizing: border-box;
                .emergency-titleText {
                    font-size: 20px;
                    font-weight: bold;
                }
                .emergency-content {
                    display: flex;
                    div.total {
                        width: 33%;
                        border-right: 2px @color6 dashed;
                        p.line1{
                            text-align: center;
                            padding-top: 0.004rem;
                            line-height: 1.5;
                            span {
                                font-weight: bold;
                            }
                        }
                        p.line2 {
                            text-align: center;
                            font-weight: bold;
                            font-size: 30px;
                        }
                        p.line3 {
                            text-align: center;
                            font-weight: bold;
                            font-size: 18px;
                        }
                    }
                    div.total:nth-child(3) {
                        border-right: none;
                    }
                }
            }

            .city-ranking {
                height: 0.28rem;
                background: @color3;
                margin-top: 0.015rem;
                padding: 0.01rem;
                box-sizing: border-box;
                p.line1 {
                    height: 0.045rem;
                    line-height: 0.045rem;
                    font-size: 0.02rem;
                    font-weight: bold;
                    button.el-button {
                        width: 0.1rem;
                        height: 0.03rem;
                        line-height: 0.01rem;
                        margin-top: .006rem;
                        float: right;
                    }
                    button.el-button-active {
                        color: white;
                        background: @color5;
                        border-color: @color5;
                    }

                    button.el-button:nth-child(2) {
                        margin-left: 0.035rem;
                        margin-right: 0.015rem;
                    }
                    button.el-button:hover {
                        opacity: 0.9;
                    }
                }
                div.echarts-div {
                    width: 100%;
                    height: calc(100% - 0.045rem);
                    box-sizing: border-box;
                }


            }

            .potential-risks {
                height: calc(100% - 0.06rem - 0.165rem - 0.295rem - 0.015rem);
                background: @color3;
                margin-top: 0.015rem;
                padding: 0.01rem;
                box-sizing: border-box;
                p.line1 {
                    height: 0.025rem;
                    line-height: 0.025rem;
                    font-size: 0.02rem;
                    font-weight: bold;
                    span:hover {
                        cursor: pointer;
                    }
                }
                div.line2 {
                    display: flex;
                    height: 0.08rem;
                    font-size: 0.016rem;
                    span.title {
                        width: 0.2rem;
                        text-align: center;
                        line-height: 0.08rem;
                    }
                    div.item {
                        width: calc(50% - .1rem);
                        text-align: center;
                        p.line-1{
                            margin-top: 0.01rem;
                            span.span-dg {
                                padding: 0 0.005rem;
                                color: @font_color1;
                            }
                        }
                        p.p-dg {
                            margin-top: 0.005rem;
                        }
                    }
                }
                p.weihuaping-title {
                    font-size: 0.016rem;
                    height: 0.021rem;
                    line-height: 0.021rem;
                    padding-left: 0.02rem;
                }
                div.container {
                    display: flex;
                    width: 100%;
                    height: calc(100% - 0.206rem);
                    font-size: 0.016rem;
                    div.item {
                        width: 25%;
                        height: 100%;
                        display: inline-flex;
                        justify-content: center;
                    }
                    div.div-left {
                        flex-direction: column;
                        align-items: center;
                        span.top {
                            margin: 0.004rem 0;
                            span {
                                color: @font_color1;
                                margin-right: 0.005rem;
                            }
                        }
                    }
                    div.div-right {
                        align-items: center;
                        border-right: 2px @color6 dashed;
                        box-sizing: border-box;
                        img {
                            height: 0.016rem;
                        }
                    }
                    div.div-left-2 {
                        flex-direction: column;
                        align-items: center;
                        span.top {
                            margin: 0.004rem 0;
                            span {
                                color: @font_color1;
                                margin-right: 0.005rem;
                            }
                        }
                    }
                    div.div-right-2 {
                        flex-direction: column;
                        align-items: center;
                        img {
                            height: 0.016rem;
                        }
                    }
                }

                
            }
        }
        .right-div{
            position: absolute;
            margin: .015rem .015rem .015rem 0;
            width: calc(30% - .015rem);
            height: calc(100% - .03rem);
            right: 0%;
            div.common {
                background: @color3;
                margin-top: 0.015rem;
                box-sizing: border-box;
                padding: 0.013rem;
                p.title {
                    font-size: 0.02rem;
                    font-weight: bold;
                    line-height: 0.025rem;
                    height: 0.025rem;
                }
                span,p {
                    line-height: 0.025rem;
                }
                
            }
            div[isfirst="yes"] {
                box-sizing: border-box;
                margin-top: 0;    
            }
            div.div-jcyj {
                box-sizing: border-box;
                height: 32%;
                p.title > span:hover {
                    cursor: pointer;
                }
                div.content-block {
                    display: flex;
                    align-items: center;
                    box-sizing: border-box;
                    padding: 0.004rem 0;
                    height: calc( (100% - 0.025rem)/4);
                    font-size: 0.016rem;
                    p[item1] {
                        width: .13rem;
                        text-align: center;
                        span[item1] {
                            width: 0.12rem;
                            text-align: center;
                        }
                    }
                    div.line-div {
                        width: 30%;
                        padding-left: 0.008rem;
                        box-sizing: border-box;
                        div[gradient-line] {
                            height: 0.02rem;
                            width: 100%;
                            background: linear-gradient(to right,#e09d46,#f8d701);
                        }
                    }
                    p[item2] {
                        width: 25%;
                        span[number] {
                            margin-left: 0.02rem;
                            // margin: 0 0.07rem 0 0.03rem;
                            width: 0.043rem;
                            span[dynamic]{
                                color: @font_color1;
                                font-weight: bold;
                                margin: 0 0.005rem;
                            }
                        }
                    }
                    div[item4] {
                        box-sizing: border-box;
                        width: 20%;
                        p > span {
                            color: @font_color2;
                        }
                    }
                }
            }
            div.div-sgaq {
                height: 33%;
                p.title > span:hover {
                    cursor: pointer;
                }
                div[container] {
                    height: calc(100% - 0.025rem);
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-around;
                    div[content] {
                        display: flex;
                        margin: 0.004rem 0.008rem;
                        flex-direction: column;
                        width: 30%;
                        align-items: center;
                        font-size: 0.018rem;
                        justify-content: center;
                        span.font-mid{
                            font-size: .016rem;
                        }
                        span[dynamic] {
                            color: @font_color1;
                            letter-spacing: 0.002rem;
                            margin-right: 0.003rem;
                            font-weight: bold;
                        }
                        span[number] {
                            color: @font_color2;
                        }
                        span.upper {
                            font-weight: bold;
                            font-size: 0.014rem;
                        }
                    }
                }
            }
            div.div-zbpj {
                height: calc(35% - .03rem);
                p.title,p.title span{
                    height: 0.04rem;
                    line-height: 0.04rem;
                    button.el-button {
                        width: 0.1rem;
                        height: 0.03rem;
                        line-height: 0.01rem;
                        margin-top: .006rem;
                        float: right;
                    }
                    button.el-button-active {
                        color: white;
                        background: @color5;
                        border-color: @color5;
                    }
                    button.el-button:nth-child(2) {
                        margin-left: 0.035rem;
                        margin-right: 0.015rem;
                    }
                    button.el-button:hover {
                        opacity: 0.9;
                    }
                }
                p.title > span:hover {
                    cursor: pointer;
                }
                .mytable {
                    width: 100%;
                    height: calc(100% - 0.04rem);
                    span.el-tag.el-tag--medium {
                        color: @font_color1;
                        font-size: .014rem;
                        font-weight: bold;
                        background: none;
                        border: none;
                    }
                }
            }
        }
        dialog-ZBPJ-header {
            background-color: @bg_color1;
        }
        .center-div{
            position: absolute;
            margin: .015rem;
            width: calc(40% - .03rem);
            height: calc(100% - .03rem);
            left: 30%;
            background: @color3;
        }
        /*指标评价弹框 start*/
        .dialog-zbpj{
            .dialog-zbpj-title{
                text-align: center;
                font-size: .016rem;
                font-weight: bold;
            }
            .pagination-page{
                margin-top: .01rem;
            }
        }
        /*指标评价弹框 end*/

        /*突发事件弹框 start*/
        .dialog-emergencies{
            .dialog-emergencies-title{
                text-align: center;
                font-size: .02rem;
                font-weight: bold;
            }
            .dialog-emergencies-total{
                height: .09rem;
                margin: 0.02rem 0.01rem;
                .toal-div+.toal-div{
                    margin-left: .03rem;
                }
                .toal-div{
                    font-size: .018rem;
                    float: left;
                    width: 30%;
                    height: 100%;
                    background-color: @bg_color2;
                    text-align: center;
                    border-radius: .01rem;
                    .text-margin{
                        margin-top: 0.02rem;
                    }
                }
            }
            .dialog-emergencies-echarts {
                width: .75rem;
                height: .35rem;
                box-sizing: border-box;
            }
        }
        /*突发事件弹框 end*/
    }
</style>